<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel='stylesheet' href='../mapbox-gl.css'>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script src="../libs/jquery.min.js"></script>
    <script type="text/javascript" src="../mapbox-gl.js"></script>
    <script type="text/javascript" src="../iclient9-mapboxgl.js"></script>
    <script type="text/javascript">
        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: {
                "version": 8,
                "sources": {
                    "vector-tiles": {
                        "type": "vector",
                        "tiles": [
                            "http://iclsvr.supermap.io/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature.mvt?returnAttributes=true&compressTolerance=-1&width=512&height=512&viewBounds={bbox-epsg-3857}&expands=0:0_2,132_128,138_64,141_32,143_16,145_8,147_4"

                        ]
                    },
                    "China": {
                        "tiles": [
                            "http://iclsvr.supermap.io/iserver/services/map-china400/restjsr/v1/vectortile/maps/China/tiles/{z}/{x}/{y}.mvt"
                        ],
                        "bounds": [
                            -180,
                            -85.0511287798065,
                            180,
                            85.05112877980648
                        ],
                        "type": "vector"
                    }
                },
                //支持字符串和对象{sourceId:spriteUrl}
                "sprite": {
                    "vector-tiles": "http://iclient.supermap.io/web/styles/street/sprite",
                    "China": "http://iclsvr.supermap.io/iserver/services/map-china400/restjsr/v1/vectortile/maps/China/sprites/sprite",
                },
                //支持字符串和对象{sourceId:glyphsUrl}
                "glyphs": {
                    "vector-tiles": "http://iclsvr.supermap.io/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature/sdffonts/{fontstack}/{range}.pbf",
                    "China": "http://iclsvr.supermap.io/iserver/services/map-china400/restjsr/v1/vectortile/maps/China/sprites/sprite"
                },
                "layers": [{
                    "layout": {
                        "visibility": "visible",
                        "line-cap": "square",
                        "line-join": "miter"
                    },
                    "metadata": {
                        "layer:caption": "Main_Railway_L@China_L10-L13"
                    },
                    "maxzoom": 21,
                    "paint": {
                        "line-width": 3.02,
                        "line-color": "rgba(0,0,0,0.40)"
                    },
                    "id": "Main_Railway_L@China_0",
                    "source": "China",
                    "source-layer": "Main_Railway_L@China",
                    "type": "line",
                    "minzoom": 8
                }, {
                    "id": "标签专题图#10",
                    "type": "symbol",
                    "source": "vector-tiles",
                    "source-layer": "标签专题图#10",
                    "layout": {
                        "text-offset": [-1.5, -0.5],
                        "text-anchor": "bottom-left",
                        "text-field": "{NAME}",
                        "text-max-width": 7,
                        "text-font": [
                            "DIN Offc Pro Medium",
                            "Arial Unicode MS Regular"
                        ],
                        "text-size": 22
                    },
                    "paint": {
                        "text-color": "red",
                        "text-opacity": {
                            "base": 1,
                            "stops": [
                                [
                                    11.99,
                                    1
                                ],
                                [
                                    12,
                                    0
                                ]
                            ]
                        },
                        "text-halo-color": "hsl(0, 0%, 100%)",
                        "text-halo-width": 1,
                        "text-halo-blur": 1
                    }

                }]

            },
            center: [116.4, 39.9],
            zoom: 8,
            attributionControl: false
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');

    </script>

</body>

</html>
